"use client";
/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from 'react';




const page = () => {
    const [data, setData] = useState("");

    const fetchPost = async (url: string, data: object) => {
        try {
            const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            });

            const result = await response.json();
            return result;
        } catch (error) {
            console.error('Error:', error);
            return null;
        }
    };

    useEffect(() => {
        const fetchData = async () => {
            const url = 'http://localhost:3000/api/demopost';
            const response = await fetchPost(url, { email: '435630144@qq.com' });
            console.log(response);


            setData(response.email);
        };

        fetchData();
    }, []);


    return (
        <div>
            <h1 className='p-3 font-douyin text-blue-400 text-3xl'>恭喜你发现了神秘的测试页面，这个页面是我用来测试各种组件和API接口</h1>
            <p className='p-3 font-douyin text-teal-400 text-2xl'>在浏览器按F12打开控制台后，刷新页面就可以看到API请求结果</p>
            <p>data:{data}</p>
            这是demo

            <div className="tooltip-bottom tooltip">
                <div className="tooltip-content">
                    <div className="font-black text-orange-400 text-2xl -rotate-10 animate-bounce">Wow!</div>
                </div>
                <button className="btn">Hover me</button>
            </div>

            <div className="join">
                <input className="join-item btn" type="radio" name="options" aria-label="Radio 1" checked />

                <input className="join-item btn" type="radio" name="options" aria-label="Radio 2" />
                <input className="join-item btn" type="radio" name="options" aria-label="Radio 3" />
            </div>

            <div className='m-10'>
                <label htmlFor="num1" className="has-checked:outline-1">

                    <div className='inline'>
                        123
                    </div>
                    <input type="radio" id='num1' className='invisible' name='num' />
                </label>
                <label htmlFor="num2" className="">
                    <p>这是2</p>
                    <input type="radio" id='num2' className='invisible' name='num' />
                </label>

                <label htmlFor="num3" className="">
                    这是3
                    <input type="radio" id='num3' className='invisible' name='num' />
                </label>
            </div>



        </div>
    );
};

export default page;
